<template>
  <div :class="themeClass">
    <div class="response">
      <div class="response_left_bj" v-if="themeClass != 'theme-dark'">
        <div class="date">{{ nowDate }}</div>
        <div class="data">
          <div class="data_item">{{ dataStatistics.emergencySuppliesPointTotal }}</div>
          <div class="data_item">{{ dataStatistics.settlementPointTotal }}</div>
          <div class="data_item">{{ dataStatistics.rescueTeamTotal }}</div>
          <div class="data_item">{{ dataStatistics.linkmanPointTotal }}</div>
        </div>
      </div>
      <div class="content">
        <div class="content_left" :keys="num">
          <div class="content_left_fx" @click="tab">防汛抗台</div>
          <div
            class="content_left_xy xy_one"
            :class="flag == '四'?'textActive':''"
            :style="{ background: flag == '四' ? clickActive : '', backgroundImage: flag == '四' ? active : '', backgroundPosition: flag == '四' ? activeP : '' }"
            @click="four(electClick1)"
          >
            四级响应
          </div>
          <div
            class="content_left_xy xy_two"
            :class="flag == '三'?'textActive':''"
            :style="{ background: flag == '三' ? clickActive : '', backgroundImage: flag == '三' ? active : '', backgroundPosition: flag == '三' ? activeP : '' }"
            @click="three"
          >
            三级响应
          </div>
          <div
            class="content_left_xy xy_three"
            :class="flag == '二'?'textActive':''"
            :style="{ background: flag == '二' ? clickActive : '', backgroundImage: flag == '二' ? active : '', backgroundPosition: flag == '二' ? activeP : '' }"
            @click="two"
          >
            二级响应
          </div>
          <div
            class="content_left_xy xy_four"
            :class="flag == '一'?'textActive':''"
            :style="{ background: flag == '一' ? clickActive : '', backgroundImage: flag == '一' ? active : '', backgroundPosition: flag == '一' ? activeP : '' }"
            @click="one"
          >
            一级响应
          </div>
        </div>
        <div class="content_box" v-show="showFlag">
          <div class="content_div">
            <span class="title">县级部门</span>
            <div class="content_div_box">
              <Scroll :on-reach-bottom="handleReachBottom" :height="scrollHeight">
                <Card dis-hover v-for="(item, index) in countyArr" :key="index">
                  <Checkbox v-model="item.checkeValue" :disabled="btnType == 'jc'?true:false" @on-change="checkChangeOne($event, index)" style="float: left; line-height: 30px"></Checkbox>
                  <div style="display: flex; justify-content: space-between" :class="{ active: item.bgFlag ? item.bgFlag : false }" :keys="num">
                    <div style="float: left; line-height: 30px">{{ item.deptName }}</div>
                    <div style="float: right">
                      <div v-show="item.isConfirm == 1">
                        <span style="line-height: 30px; margin-right: 5px">已确认</span>
                        <Icon type="md-checkmark-circle" style="color: #53ff8b; font-size: 20px" />
                      </div>
                      <div v-show="item.isConfirm == 0" style="color: #f94f4f">
                        <span style="line-height: 30px; margin-right: 5px">未确认</span>
                        <Icon type="ios-call" style="font-size: 20px" />
                      </div>
                    </div>
                  </div>
                </Card>
              </Scroll>
            </div>
          </div>
          <div class="content_div" style="margin: 0 5.2083vw">
            <span class="title">镇级部门</span>
            <div class="content_div_box">
              <Scroll :on-reach-bottom="handleReachBottom" :height="scrollHeight">
                <Card dis-hover v-for="(item, index) in townArr" :key="index">
                  <Checkbox v-model="item.checkeValue" :disabled="btnType == 'jc'?true:false" @on-change="checkChangeTwo($event, index)" style="float: left; line-height: 30px"></Checkbox>
                  <div style="display: flex; justify-content: space-between" :class="{ active: item.bgFlag ? item.bgFlag : false }" :keys="num">
                    <div style="float: left; line-height: 30px">{{ item.deptName }}</div>
                    <div style="float: right; line-height: 30px">
                      <div v-show="item.isConfirm == 1">
                        <span style="line-height: 30px; margin-right: 5px">已确认</span>
                        <Icon type="md-checkmark-circle" style="color: #53ff8b; font-size: 20px" />
                      </div>
                      <div v-show="item.isConfirm == 0" style="color: #f94f4f">
                        <span style="line-height: 30px; margin-right: 5px">未确认</span>
                        <Icon type="ios-call" style="font-size: 20px" />
                      </div>
                    </div>
                  </div>
                </Card>
              </Scroll>
            </div>
          </div>
          <div class="content_div">
            <span class="title">村级部门</span>
            <div class="content_div_box">
              <Scroll :on-reach-bottom="handleReachBottom" :height="scrollHeight">
                <Card dis-hover v-for="(item, index) in villageArr" :key="index">
                  <Checkbox v-model="item.checkeValue" :disabled="btnType == 'jc'?true:false" @on-change="checkChangeThree($event, index)" style="float: left; line-height: 30px"></Checkbox>
                  <div style="display: flex; justify-content: space-between" :class="{ active: item.bgFlag ? item.bgFlag : false }" :keys="num">
                    <div style="float: left; line-height: 30px">{{ item.deptName }}</div>
                    <div style="float: right; line-height: 30px">
                      <div v-show="item.isConfirm == 1">
                        <span style="line-height: 30px; margin-right: 5px">已确认</span>
                        <Icon type="md-checkmark-circle" style="color: #53ff8b; font-size: 20px" />
                      </div>
                      <div v-show="item.isConfirm == 0" style="color: #f94f4f">
                        <span style="line-height: 30px; margin-right: 5px">未确认</span>
                        <Icon type="ios-call" style="font-size: 20px" />
                      </div>
                    </div>
                  </div>
                </Card>
              </Scroll>
            </div>
          </div>
        </div>
        <div style="margin-top: 88px" v-if="!showFlag">
          <barCharts :themeClass="themeClass" :dataArr="dataArr"></barCharts>
        </div>
        <div class="btnClass" v-if="showFlag">
          <div class="btn" @mouseover="mouseOver" @mouseleave="mouseLeave" :style="hover" v-if="btnType == 'qd'" @click="launch">{{ themeClass != 'theme-dark' ? '启动' : '' }}</div>
          <div class="btn jc" @mouseover="relieveHover" @mouseleave="mouseLeave" :style="hover" v-if="btnType == 'jc'" @click="relieve">{{ themeClass != 'theme-dark' ? '解除' : '' }}</div>
          <div class="btn tz" @mouseover="adjustHover" @mouseleave="mouseLeave" :style="hover" v-if="btnType == 'tz'" @click="adjust">{{ themeClass != 'theme-dark' ? '调整' : '' }}</div>
        </div>
      </div>
      <popUp ref="popUp" :title="title" :type="type" :color="color" :qdData="qdData" @getter="getter" @complete="complete"></popUp>
    </div>
  </div>
</template>
<script>
import barCharts from './barCharts.vue'
import popUp from './popUp.vue'
import { dataStatisticss, deptConfirmList, getCurrentLevel, getResourceList } from '@/api/index.js'
const moment = require('moment')
export default {
  components: {
    barCharts,
    popUp
  },
  data () {
    return {
      countyArr: [],
      dataArr: [],
      townArr: [],
      villageArr: [],
      checkValue: false,
      num: 0,
      hover: '',
      btnType: 'qd',
      showFlag: false,
      type: '',
      title: '',
      theme: '',
      flag: '一',
      clickActive: '',
      color: '',
      typeData: '',
      active: '',
      activeP: '',
      electClick1: '',
      arr1: [],
      arr2: [],
      arr3: [],
      qdData: {},
      activeId: '',
      checkeValue: '',
      scrollHeight: 650,
      nowDate: '',
      dataStatistics: {
        emergencySuppliesPointTotal: 0,
        settlementPointTotal: 0,
        rescueTeamTotal: 0,
        linkmanPointTotal: 0
      }
    }
  },
  computed: {
    themeClass () {
      // 监听主题变化
      return `theme-${this.$store.getters.getTheme}`
    }
  },
  watch: {
    themeClass () {
      // 监听主题变化
      if (this.flag === '四') {
        this.four()
      }
      if (this.flag === '三') {
        this.three()
      }
      if (this.flag === '二') {
        this.two()
      }
      if (this.flag === '一') {
        this.one()
      }
    }
  },
  created () {
    setInterval(() => {
      this.nowDate = moment(new Date()).format('YYYY/MM/DD HH:mm:ss')
    }, 1000)
    this.getDataStatistics()
    this.getCurrentLevel()
    this.getResourceList()
  },
  methods: {
    // 获取统计
    getResourceList () {
      getResourceList().then(res => {
        this.dataStatistics = res.result
      })
    },
    /* 应急响应数据统计 */
    getDataStatistics () {
      dataStatisticss().then((res) => {
        if (res.code === 200) {
          this.dataArr = [...res.result]
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    /* 部门列表（用户类部门） */
    deptConfirmLists () {
      /* //部门级别：level 0-县级 1-镇级 2-村级 */
      deptConfirmList({
        id: this.activeId
      }).then((res) => {
        if (res.code === 200) {
          const { countyDeptList, townDeptList, villageDeptList } = res.result
          this.countyArr = []
          this.townArr = []
          this.villageArr = []
          countyDeptList.forEach((e) => {
            this.countyArr.push({
              id: e.id,
              deptId: e.deptId,
              deptName: e.deptName,
              isConfirm: e.isConfirm,
              checkeValue: e.isConfirm !== null
            })
          })
          townDeptList.forEach((f) => {
            this.townArr.push({
              id: f.id,
              deptId: f.deptId,
              deptName: f.deptName,
              isConfirm: f.isConfirm,
              checkeValue: f.isConfirm !== null
            })
          })
          villageDeptList.forEach((g) => {
            this.villageArr.push({
              id: g.id,
              deptId: g.deptId,
              deptName: g.deptName,
              isConfirm: g.isConfirm,
              checkeValue: g.isConfirm !== null
            })
          })
          // this.countyArr = countyDeptList
          // this.townArr = townDeptList
          // this.villageArr = villageDeptList
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    /* //当前启动响应状态 */
    getCurrentLevel () {
      getCurrentLevel().then((res) => {
        if (res.code === 200) {
          const { status, id, grade } = res.result
          this.activeId = id
          this.deptConfirmLists()
          if (status === 1) {
            switch (grade) {
            case 1:
              this.flag = '一'
              break
            case 2:
              this.flag = '二'
              break
            case 3:
              this.flag = '三'
              break
            case 4:
              this.flag = '四'
              break
            }
            this.electClick1 = this.flag
            if (this.flag === '四') {
              this.four()
            }
            if (this.flag === '三') {
              this.three()
            }
            if (this.flag === '二') {
              this.two()
            }
            if (this.flag === '一') {
              this.one()
            }
          }
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    handleReachBottom () {
      /* // 滚动条事件 */
      return new Promise((resolve) => {
        setTimeout(() => {
          const last = this.list1[this.list1.length - 1]
          for (let i = 1; i < 11; i++) {
            this.list1.push(last + i)
          }
          resolve()
        }, 2000)
      })
    },
    checkChangeOne (evt, index) {
      /* // 复选框事件 */
      const i = this.arr1.indexOf(this.countyArr[index].deptId)
      if (evt) {
        if (i === -1) {
          this.arr1.push(this.countyArr[index].deptId)
        }
      } else {
        this.arr1.splice(i, 1)
      }
      this.countyArr[index].bgFlag = evt
      this.num++
    },
    checkChangeTwo (evt, index) {
      const i = this.arr2.indexOf(this.townArr[index].deptId)
      if (evt) {
        if (i === -1) {
          this.arr2.push(this.townArr[index].deptId)
        }
      } else {
        this.arr2.splice(i, 1)
      }
      this.townArr[index].bgFlag = evt
      this.num++
    },
    checkChangeThree (evt, index) {
      const i = this.arr3.indexOf(this.villageArr[index].deptId)
      if (evt) {
        if (i === -1) {
          this.arr3.push(this.villageArr[index].deptId)
        }
      } else {
        this.arr3.splice(i, 1)
      }
      this.villageArr[index].bgFlag = evt
      this.num++
    },
    mouseOver () {
      /* // 启动按钮hover */
      if (this.themeClass === 'theme-dark') {
        this.hover = {
          // color: '#7BC2FF',
          backgroundImage: `url(${require('../../assets/images/yjxy/qd_hover.png')})`,
          backgroundPosition: '-28px 94px'
        }
      }
    },
    mouseLeave: function () {
      /* // hover移出 */
      this.hover = ''
    },
    relieveHover () {
      /* // 解除按钮hover */
      if (this.themeClass === 'theme-dark') {
        this.hover = {
          // color: '#7BC2FF',
          backgroundImage: `url(${require('../../assets/images/yjxy/jc_hover.png')})`,
          backgroundPosition: '-28px 94px'
        }
      }
    },
    adjustHover () {
      /* // 调整按钮hover */
      if (this.themeClass === 'theme-dark') {
        this.hover = {
          // color: '#7BC2FF',
          backgroundImage: `url(${require('../../assets/images/yjxy/tz_hover.png')})`,
          backgroundPosition: '-28px 94px'
        }
      }
    },
    launch () {
      /* // 启动响应的按钮 */
      let dj = ''
      switch (this.flag) {
      case '一':
        dj = 1
        break
      case '二':
        dj = 2
        break
      case '三':
        dj = 3
        break
      case '四':
        dj = 4
        break
      }
      const data = {
        grade: dj,
        countyDepIdList: this.arr1,
        townDepIdList: this.arr2,
        villageDepIdList: this.arr3
      }
      if (this.typeData === 'btn' && (this.arr1.length || this.arr2.length || this.arr3.length)) {
        this.qdData = data
        this.type = 'btn'
        // this.$refs.popUp.open()
      } else {
        this.$Message.error('请选择响应等级或者部门')
      }
    },
    relieve () {
      /* // 解除响应的按钮 */
      const data = {
        id: this.activeId
      }
      this.qdData = data
      this.title = '是否确认解除响应'
      this.type = 'btn'
      // this.btnType = 'qd'
      // this.electClick1 = ''
      // this.$refs.popUp.close()
    },
    adjust () {
      /* // 调整的响应等级的按钮 */
      this.title = `是否确认调整${this.electClick1}级响应为${this.flag}级响应`
      let dj = ''
      switch (this.flag) {
      case '一':
        dj = 1
        break
      case '二':
        dj = 2
        break
      case '三':
        dj = 3
        break
      case '四':
        dj = 4
        break
      }
      if (this.arr1.length || this.arr2.length || this.arr3.length) {
        const data = {
          grade: dj,
          countyDepIdList: this.arr1,
          townDepIdList: this.arr2,
          villageDepIdList: this.arr3
        }
        this.qdData = data
        this.type = 'btn'
      } else {
        this.$Message.error('请选择需要调整的部门')
      }
    },
    tab () {
      this.showFlag = false
      this.getDataStatistics()
    },
    four () {
      /* // 四级响应 */
      if (this.themeClass === 'theme-dark') {
        this.clickActive = ''
        this.active = `url(${require('../../assets/images/yjxy/active_4.png')})`
        this.activeP = '-22px -40px'
      } else {
        this.active = ''
        this.activeP = ''
        this.clickActive = '#027AFF'
      }
      this.flag = '四'
      this.title = '是否确认启动四级响应'
      this.typeData = 'btn'
      this.color = 'blue'
      if (this.electClick1 !== '') {
        if (this.electClick1 === this.flag) {
          this.btnType = 'jc'
        } else {
          this.btnType = 'tz'
        }
      }
      this.showFlag = true
    },
    three () {
      /* // 三级响应 */
      if (this.themeClass === 'theme-dark') {
        this.clickActive = ''
        this.active = `url(${require('../../assets/images/yjxy/active_3.png')})`
        this.activeP = '-22px -40px'
      } else {
        this.active = ''
        this.activeP = ''
        this.clickActive = '#EFE819'
      }
      this.flag = '三'
      this.title = '确认启动三级响应'
      this.typeData = 'btn'
      this.color = 'blue'
      // this.color = 'yellow'
      console.log(this.electClick1, 'xuanzhong')
      if (this.electClick1 !== '') {
        if (this.electClick1 === this.flag) {
          this.btnType = 'jc'
        } else {
          this.btnType = 'tz'
        }
      }
      this.showFlag = true
    },
    two () {
      /* // 二级响应 */
      if (this.themeClass === 'theme-dark') {
        this.clickActive = ''
        this.active = `url(${require('../../assets/images/yjxy/active_2.png')})`
        this.activeP = '-22px -40px'
      } else {
        this.active = ''
        this.activeP = ''
        this.clickActive = '#FF9728'
      }
      this.flag = '二'
      this.title = '确认启动二级响应'
      this.typeData = 'btn'
      this.color = 'blue'
      // this.color = 'orange'
      if (this.electClick1 !== '') {
        if (this.electClick1 === this.flag) {
          this.btnType = 'jc'
        } else {
          this.btnType = 'tz'
        }
      }
      this.showFlag = true
    },
    one () {
      /* // 一级响应 */
      if (this.themeClass === 'theme-dark') {
        this.clickActive = ''
        this.active = `url(${require('../../assets/images/yjxy/active_1.png')})`
        this.activeP = '-22px -40px'
      } else {
        this.active = ''
        this.activeP = ''
        this.clickActive = '#FE5151'
      }
      this.flag = '一'
      this.title = '确认启动一级响应'
      this.typeData = 'btn'
      this.color = 'blue'
      // this.color = 'red'
      if (this.electClick1 !== '') {
        if (this.electClick1 === this.flag) {
          this.btnType = 'jc'
        } else {
          this.btnType = 'tz'
        }
      }
      this.showFlag = true
    },
    getter (val) {
      /* // 弹框返回的参数 */
      if (val === 'jdt') {
        if (this.btnType === 'qd') {
          this.title = '启动中...'
        }
        if (this.btnType === 'tz') {
          this.title = '响应调整下发中...'
        }
        if (this.btnType === 'jc') {
          this.title = '响应解除下发中...'
        }
        this.type = val
        this.electClick1 = this.flag
      } else if (val === 'jc') {
        this.btnType = val
      } else if (val === 'wc') {
        this.title = `${this.electClick1}级响应启动完成`
        this.type = val
      } else if (val === 'jcwc') {
        this.title = '应急响应解除完成'
        this.type = val
      } else if (val === 'jccg') {
        this.btnType = 'qd'
        this.active = ''
        this.activeP = ''
        this.clickActive = ''
        this.electClick1 = ''
        this.typeData = ''
        this.arr1 = []
        this.arr2 = []
        this.arr3 = []
      } else {
        this.type = ''
      }
    },
    complete () {
      this.getCurrentLevel()
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/index.scss';
.theme-dark {
  height: auto;
}
.theme-light {
  height: auto;
}
.response {
  width: 100%;
  height: 100vh;
  // height: 1080px;
  padding-top: 60px;
  @include themify($themes) {
    // background-image: themed('yjxy_bg');
    color: themed('yjxy_font_color_title');
  }
  .response_left_bj{
    width:16.5625vw;
    height:100%;
    background-image: url(../../assets/images/yjxy/left_bj.jpg);
    background-size: cover;
    position: absolute;
    left:0;
    top:0;
    .date{
      height:20px;
      line-height:22px;
      position: absolute;
      left:2.9688vw;
      top:2vh;
      font-size:20px;
    }
    .data{
      width:100%;
      height:15px;
      display: flex;
      justify-content: space-around;
      position: absolute;
      // left:-2px;
      top:10.44vh;
    }
    .data_item{
      font-size: 20px;
      display: inline-block;
      width: 1.875rem /* 30/16 */;
    }
  }
  // background-position: -15px -25px;
  // background: #101620;
  .content {
    width: 100%;
    height: 75.8333vh;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    position: relative;
    .content_left {
      // float: left;
      margin-top:74px;
      width: 16.5625vw;//318px
      // padding-left: 7.6042vw;
      height: 700px; //764px
      @include themify($themes) {
        border-right:themed(yjxy_border_colors);
      }
      text-align: right;
      margin-right: 4.5313vw;
      position: relative;
    }
    .content_left_fx {
      cursor: pointer;
      // width: 201px;
      line-height: 36px;
      font-size: 24px;
      box-sizing: border-box;
      margin-right: 0px;
      position: absolute;
      right: 0;
      @include themify($themes) {
        top: themed('yjxy_bj_title_top');
        background-image: themed('yjxy_bj_title');
        background-size: 100% 100%;
        text-shadow: themed('yjxy_title_text_shadow');
        width:themed('yjxy_title_width');
        padding-right: themed('yjxy_title_padding');
        text-align: themed('yjxy_title_textAlign');
      }
      // background-image: url(../../assets/images/titles.png);
    }
    .content_left_xy {
      cursor: pointer;
      // width: 179px;
      margin: 40px 0;
      // line-height: 36px;
      font-size: 18px;
      // padding-right: 30px;
      box-sizing: border-box;
      position: absolute;
      // right: 0;
      @include themify($themes) {
        line-height: themed('yjxy_content_left_xy_height');
        width:themed('yjxy_content_left_xy_width');
        padding-right:themed('yjxy_content_left_xy_padding');
        right:themed('yjxy_content_left_xy_right');
        text-align: themed('yjxy_title_textAlign');
      }
    }
    .xy_one {
      @include themify($themes) {
        background-image: themed('yjxy_bj_blue');
        background: themed('yjxy_bj_color_title1');
        color: themed('yjxy_font_color_title');
        box-shadow: themed('yjxy_title_box_shadow1');
      }
      // background-image: url(../../assets/images/blue.png);
      // top: 21.2962vh;//230px
      top: 230px; //230px
    }
    .xy_two {
      @include themify($themes) {
        background-image: themed('yjxy_bj_yellow');
        background: themed('yjxy_bj_color_title2');
        color: themed('yjxy_font_color_title');
        box-shadow: themed('yjxy_title_box_shadow2');
      }
      // background-image: url(../../assets/images/yellow.png);
      // top: 27.7777vh;//300px
      top: 300px; //230px
    }
    .xy_three {
      @include themify($themes) {
        background-image: themed('yjxy_bj_orange');
        background: themed('yjxy_bj_color_title3');
        color: themed('yjxy_font_color_title');
        box-shadow: themed('yjxy_title_box_shadow3');
      }
      // background-image: url(../../assets/images/orange.png);
      // top: 34.2592vh;//370px
      top: 370px; //230px
    }
    .xy_four {
      @include themify($themes) {
        background-image: themed('yjxy_bj_red');
        background: themed('yjxy_bj_color_title4');
        color: themed('yjxy_font_color_title');
        box-shadow: themed('yjxy_title_box_shadow4');
      }
      // background-image: url(../../assets/images/red.png);
      // top: 40.7407vh;//440px
      top: 440px; //230px
    }
    .content_box {
      float: left;
      display: flex;
      justify-content: space-between;
    }
    .content_div {
      // width: 400px;
      width: 20.8333vw;
      height: 100%;
      // height: 770px;
      //   border: 1px solid #000;
    }
    .content_div_box {
      height: 700px; //700px
      width: 100%;
      @include themify($themes) {
        background-image: themed('yjxy_bj_kuang');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        // border:1px solid themed('yjxy_bj_kuang');#889EB9
        box-shadow: themed('yjxy_border_color');
        color: themed('yjxy_font_color_font');
        background: themed('yjxy_content_color');
      }
      // background-image: url(../../assets/images/kuang.png);
      padding: 15px 5px;
      box-sizing: border-box;
    }
    .title {
      display: inline-block;
      width: 10.9375vw;
      line-height: 50px;
      margin-bottom: 20px;
      //   border: 1px solid #000;
      text-align: center;
      transform: translateX(38%);
      font-size: 24px;
      @include themify($themes) {
        background-image: themed('yjxy_bj_biaotikuang');
        background: themed('yjxy_bj_color_title1_active');
        background-size: 100% 100%;
      }
      // background-image: url(../../assets/images/biaotikuang.png);
    }
    ::v-deep .ivu-checkbox-checked .ivu-checkbox-inner:after {
      transform: scale(1);
      width: 8px;
      top: 2px;
      left: 2px;
      // height:8px;
      border: 2px solid #1E83FF;
      background: #1E83FF;
    }
    ::v-deep .ivu-checkbox-inner {
      background-color: transparent;
      border: 1px solid #1E83FF;
    }
    ::v-deep .ivu-card-bordered {
      border: none;
    }
    ::v-deep .ivu-card {
      background: transparent;
    }
    ::v-deep ::-webkit-scrollbar {
      width: 6px; //竖轴宽度
      height: 4px; //横轴宽度
      // background-color: #404f68;
      @include themify($themes) {
        background-color: themed('yjxy_thumb');
        opacity: themed('yjxy_scroll_opacity');
        // background-color:rgba(64, 79, 104, 0.5)
      }
    }
    /* 滚动槽 */
    ::v-deep ::-webkit-scrollbar-track {
      border-radius: 6px;
    }
    ::v-deep ::-webkit-scrollbar-thumb {
      @include themify($themes) {
        background-color: themed('yjxy_scrollbar');
        // opacity: themed('yjxy_scroll_opacity');
        // background-color:rgba(64, 79, 104, 0.5)
      }
    }
    .active {
      background: rgba(118, 132, 155, 0.2);
    }
    ::v-deep .ivu-card-body {
      padding: 2px 10px;
    }
  }
  .btnClass {
    position: absolute;
    left: 50%;
    bottom: -110px;
    transform: translateX(-50%);
  }
  .btn {
    width: 200px;
    height: 42px;
    margin: 0 auto;
    @include themify($themes) {
        box-shadow: themed('yjxy_btn_box_shadow');
    }
    text-align: center;
    line-height: 40px;
    font-size: 24px;
    cursor: pointer;
    @include themify($themes) {
      background-image: themed('yjxy_bj_qd');
      background: themed('yjxy_bj_color_qd');
    }
    background-position: -28px 92px;
  }
  .jc {
    @include themify($themes) {
      background-image: themed('yjxy_bj_jc');
      background: themed('yjxy_bj_color_jc');
    }
    // background-image: url(../../assets/images/jc.png);
    background-position: -28px 92px;
  }
  .tz {
    @include themify($themes) {
      background-image: themed('yjxy_bj_tz');
      background: themed('yjxy_bj_color_tz');
    }
    background-position: -28px 92px;
  }
  .textActive{
    text-shadow: 0px 1px 2px rgba(49, 46, 16, 0.6);
  }
}
</style>
